<template>
	<div class="flex items-center">
		<sports-icon :sport-id="sportId" />
		<div class="mx-1 flex-1 truncate">
			<betting-name
				:id="selection.id"
				:betslip-line="selection.betslipLine"
				:points="selection.points"
				:side="selection.side"></betting-name>
			{{ eventName }}
		</div>
		<betting-odds :value="selection?.displayOdds" at />
	</div>
</template>

<script lang="ts" setup>
import { SportsIcon } from '@/components/sports'
import { BettingOdds, BettingName } from '@/components/betting'
import { BetslipItemType, Selection } from '@/types'
import { PropType, computed } from 'vue'
import { BettingType } from '@/enums'
import { getBettingCode } from '@/utils'
import { useMatchStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipItemType>,
		required: true
	},
	selection: {
		type: Object as PropType<Selection>,
		required: true
	}
})

const matchStore = useMatchStore()

const match = computed(() => matchStore.getMatch(props.data.eventId))

const sportId = computed(() => props.data.selection?.sportId || match.value.sportId)

const eventName = computed(() => {
	if (props.data.marketId.substring(1, 3) === getBettingCode(BettingType.ou)) {
		return ' ' + (props.data?.selection?.eventName || match.value?.eventName || '')
	}
	return ''
})
</script>
